import React, { Component } from 'react'
import {View, Text,Image, TouchableOpacity, ScrollView} from 'react-native'
import {request} from '../../network/request'
export default class Friends extends Component {
  constructor(props) {
    super(props)
    this.state ={
      inf:{},
      isShow:false
    }
    console.log(this.props)
  }
  componentDidMount(){
    request({
      url:'/home/jiaoyou'
    }).then(res => {
      this.setState({
        inf:res.data,
        isShow:true
      })
      console.log(res.data)
    }).catch(err => {
      console.log(err)
    })
  }
  // 跳转到今日佳人的页面
  handPress = () => {
    console.log(this.props)
    this.props.navigation.push('UserPage',{name:this.state.inf.Hot.name});
  }
  // 跳转每个人的主页面
  handPress1 =(i) =>{
    // console.log(this.props)
    this.props.navigation.push('UserPage',{name:this.state.inf.normal[i].name});
  }
  render() {
    let { isShow, inf} = this.state
    if(!isShow) {
      return (
        <View><Text></Text></View>
      )
    }else{
      return (
        <ScrollView style={{backgroundColor:'grey'}}>
          {/* 头部 */}
          <View style={{height:150}}>
            <Image source={{uri:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605246659699&di=10a4cbab9dedd8b0cb85c6e1c227a884&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F05%2F81%2F85%2F035c3c50f47905f.jpg'}}
                    style={{height:'100%',position:'absolute',width:'100%'}}
            ></Image>
            <View style={{flex:1,flexDirection:'row',justifyContent:'center',alignItems:'center'}}>
              <TouchableOpacity style={{height:50,width:50,borderRadius:50}}>
                <Image source={require('../../assets/img/icprofileselect.png')} 
                  style={{height:'100%',width:'100%'}}
                ></Image>
                <Text style={{textAlign:'center',color:'grey'}}>探花</Text>
              </TouchableOpacity>
              <TouchableOpacity style={{height:50,width:50,borderRadius:50,marginLeft:20}}>
                <Image source={require('../../assets/img/dingwei.png')} 
                  style={{height:'100%',width:'100%'}}
                ></Image>
                <Text style={{textAlign:'center',color:'grey'}}>搜附近</Text>
              </TouchableOpacity>
              <TouchableOpacity style={{height:50,width:50,borderRadius:50,marginLeft:20}}>
                <Image source={require('../../assets/img/youling.png')} 
                  style={{height:'100%',width:'100%'}}
                ></Image>
                <Text style={{textAlign:'center',color:'grey'}}>测灵魂</Text>
              </TouchableOpacity>
            </View>
          </View>
          {/* 今日佳人 */}
          <TouchableOpacity style={{height:100}} onPress={this.handPress}>
          <View style={{flex:1,flexDirection:'row',justifyContent:'space-between',alignItems:'center',height:100,backgroundColor:'white'}}>
              {/* 图片 */}
              <View style={{height:100,width:100}}>
                <Image source={{uri:inf.Hot.img}}
                  style={{height:100,width:100}}
                ></Image>
                <View style={{position:'absolute',bottom:0,left:15,fontWeight:'bold',height:20,width:'70%',backgroundColor:'pink',borderRadius:10}}>
                  <Text style={{color:'red',textAlign:'center'}}>今日佳人</Text>
                </View>
              </View>
              {/* 个人信息 */}
              <View style={{height:70,backgroundColor:'green',flex:1,backgroundColor:'white'}}> 
                <View style={{height:'50%',flex:1,flexDirection:'row',justifyContent:'flex-start',paddingLeft:10}}>
                  <Text style={{fontSize:16}}>{inf.Hot.name} 女  {inf.Hot.age}</Text>
                  <Image source={require('../../assets/img/nansheng.png')}
                    style={{height:25,width:25,marginLeft:10,marginTop:-3}}
                  ></Image>
                </View>
                <View style={{height:'50%',paddingLeft:10,}}>
                  <Text style={{fontSize:16}}>单身|{inf.Hot.school}|年龄相仿</Text>
                </View>
              </View>
              {/* 爱心 */}
              <View style={{height:70,width:80,paddingLeft:20,}}>
                <Image source={require('../../assets/img/aixin.png')}
                  style={{height:40,width:40}}
                ></Image>
                <Text style={{marginLeft:5}}>{inf.Hot.dianzan}</Text>
              </View>
          </View>
          </TouchableOpacity>
          {/* 推荐 */}
          <Text style={{fontSize:18,margin:10,color:'white',fontWeight:'bold'}}>推荐</Text>
          
          {/*  */}
          {
            inf.normal.map((value,index)=>{
              return <TouchableOpacity style={{height:100}} onPress={this.handPress1.bind(this,index)}>
              <View style={{flex:1,flexDirection:'row',justifyContent:'space-between',alignItems:'center',height:70,backgroundColor:'white'}}>
                {/* 图片 */}
                <View style={{height:70,width:70}}>
                  <Image source={{uri:value.img}}
                    style={{height:70,width:70,borderRadius:50}}
                  ></Image>
                </View>
                {/* 个人信息 */}
                <View style={{height:70,flex:1}}> 
                  <View style={{height:'50%',flex:1,flexDirection:'row',justifyContent:'flex-start',paddingLeft:10}}>
                    <Text style={{fontSize:16}}>{value.name} 女    {value.age}</Text>
                    <Image source={require('../../assets/img/nansheng.png')}
                      style={{height:25,width:25,marginLeft:10,marginTop:-3}}
                    ></Image>
                  </View>
                  <View style={{height:'50%',paddingLeft:10}}>
                    <Text style={{fontSize:16}}>单身|{value.school}|年龄相仿</Text>
                  </View>
                </View>
                {/* 爱心 */}
                <View style={{height:70,width:80,paddingLeft:20,}}>
                  <Image source={require('../../assets/img/aixin.png')}
                    style={{height:40,width:40}}
                  ></Image>
                  <Text style={{marginLeft:5}}>{value.dianzan}</Text>
                </View>
            </View>
            </TouchableOpacity>
            })
          }
        </ScrollView>
      )
    }
  }
}